@use 'sass:map';
@use 'sass:color';
@use '@angular/material' as mat;
@use 'libs/component-angular/styles/material/all-components' as components;
@use 'libs/formly/formly-theme' as formly;
@use 'libs/story-angular/responsive/responsive-theme' as responsive;
@use 'libs/story-angular/story/story-theme' as story;
@use 'libs/story-angular/src/lib/story-theme' as story-designer;
@use 'libs/story-angular/widgets/widgets-theme' as widgets;
@use 'packages/angular/theming' as ocap;


$material-typeface: Lato, 'Noto Serif SC', monospace;

// Define a theme.
$primary: mat.define-palette(mat.$blue-palette, 500);
$accent: mat.define-palette(mat.$amber-palette, A700, A400, A200);

$light-secondary-text: rgba(white, 0.7);
$light-disabled-text: rgba(white, 0.5);
$light-dividers: rgba(white, 0.12);
$grey-palette: mat.$blue-grey-palette;

$background: (
  status-bar: #151a30,
  app-bar:    theme('colors.neutral.900'),
  background: black,
  hover:      rgba(white, 0.1), // TODO(kara): check style with Material Design UX
  card:       rgb(22, 24, 28),
  dialog:     rgb(22, 24, 28),
  disabled-button: rgba(white, 0.12),
  raised-button: map.get($grey-palette, 800),
  // focused-button: $light-focused,
  selected-button: map.get($grey-palette, 900),
  selected-disabled-button: map.get($grey-palette, 800),
  disabled-button-toggle: black,
  unselected-chip: map.get($grey-palette, 700),
  disabled-list-option: black,
  tooltip: theme('colors.neutral.700'),
);
$foreground: (
  base:              white,
  divider:           $light-dividers,
  dividers:          $light-dividers,
  disabled:          $light-disabled-text,
  disabled-button:   rgba(white, 0.3),
  disabled-text:     $light-disabled-text,
  elevation:         black,
  hint-text:         $light-disabled-text,
  secondary-text:    $light-secondary-text,
  icon:              white,
  icons:             white,
  text:              theme('colors.neutral.200'),
  slider-min:        white,
  slider-off:        rgba(white, 0.3),
  slider-off-active: rgba(white, 0.3),
);

$dark-theme: map.deep-merge(
  mat.define-dark-theme((
    color: (
      primary: $primary,
      accent: $accent,
    )
  )),
  (
    color: (
      background: $background,
      foreground: $foreground
    )
  )
);

$custom-typography: mat.define-typography-config(
  $font-family: $material-typeface
);

.dark, .ngm-story__device.ngm-theme-dark.dark {
  --ngm-color-primary: #{mat.get-color-from-palette($primary)};
  --ngm-color-on-primary-container: #{darken(mat.get-color-from-palette($primary), 30%)};
  --ngm-color-primary-container: #{lighten(mat.get-color-from-palette($primary), 30%)};
  --ngm-color-primary-container-variant: #{color.change(mat.get-color-from-palette($primary), $alpha: 0.1)};
  --ngm-color-secondary: #{mat.get-color-from-palette($accent)};
  --ngm-color-secondary-container: #{lighten(mat.get-color-from-palette($accent), 30%)};
  --ngm-color-outline: #{map.get($foreground, divider)};

  // Include all theme styles for the mat components.
  @include mat.all-component-colors($dark-theme);
  @include components.all-component-colors($dark-theme);
  @include formly.color($dark-theme);
  @include responsive.color($dark-theme);
  @include story.color($dark-theme);
  @include story-designer.color($dark-theme);
  @include widgets.color($dark-theme);

  @include ocap.core-color($dark-theme);
  @include ocap.analytical-grid-color($dark-theme);
  @include ocap.breadcrumb-color($dark-theme);
  @include ocap.controls-color($dark-theme);
  @include ocap.entity-color($dark-theme);
  @include ocap.common-color($dark-theme);
}
